<template>
	<view class="box">
		<view style="width: 690rpx;margin: 0 auto; margin-bottom: 30rpx;">
			<u-search placeholder="请输入关键字" v-model="title" :clearabled="true" :showAction="false"></u-search>
		</view>
		
		<view class="list" v-for="it in list" @click="toDetail(it)">
			<view class="list-l">
				<image :src="ossUrl + `/static/13.png`" mode="" class="icon"></image>
			</view>
			<view class="list-c">{{it.name}}</view>
			<image :src="ossUrl + `/static/26.png`" mode="" class="rig"></image>
		</view>
	</view>
</template>

<script>
	import {
		InformationHelpList
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				list: [],
				title: ''
			};
		},
		watch:{
			title:{
				handler(val){
					this.list = []
					this.init()
				}
			}
		},
		onLoad() {
			this.init()
		},
		methods:{
			toDetail(it){
				uni.navigateTo({
					url:'/pagesA/aboutUs/aboutUs?id=' + it.id
				})
			},
			init() {
				uni.showLoading()
				InformationHelpList({title: this.title}).then(res=>{
					uni.hideLoading()
					this.list = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}
.box {
	padding: 30rpx 0;
	.list {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 10rpx;
		background: #FFFFFF;
		padding: 32rpx 26rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.list-l {
			width: 42rpx;
			height: 100%;
		}
		.icon {
			width: 42rpx;
			height: 42rpx;
		}
		.list-c {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #131313;
			padding-left: 28rpx;
			padding-right: 68rpx;
			flex: 1;
			min-width: 0;
		}
		.rig {
			width: 30rpx;
			height: 30rpx;
		}
	}
}
</style>
